<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>chapter3</title>
    <style>
      .dib-baseline{
        height: 120px;
        width: 120px;
        display: inline-block;
        border: 1px solid black;
      }
      .icon-delete{
        background: url("z.png") no-repeat center;
      }
      .icon {
        display: inline-block;
        width:20px; height:20px;
        white-space: nowrap;
        letter-spacing: -1em;
        text-indent: -999em;
      }
      .icon:before{
        content: '/3000';
      }
      .icon-d{
        line-height: 20px;
      }
      p{
        font-size: 18px;
      }
      .container{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
        font-size: 0;
        text-align: center;
      }
      .container:after{
        content: "";
        display: inline-block;
        height: 60%;
        vertical-align: middle;
      }
      .content{
        display: inline-block;
        vertical-align: middle;
        background-color: #fff;
      }
      .detail{
        font-size: 15px;
        width: 200px;
        height: 300px;
      }
      /*.fat{*/
      /*  width: 600px;*/
      /*}*/
      .float{
        width: 250px;
      }
      .float img{
        float: left;
        margin-right: 60px;
      }
      .bobox>a:first-child{
        float: left;
      }
      .bobox>a:last-child{
        float: right;
      }
      h3{
        text-align: center;
      }
      .animal{
        overflow: hidden;
        /*margin-left: 150px;*/
      }
      .containerid{
        height: 120px;
        overflow: hidden;
        width: 300px;
      }
      .box{
        height: 200px;

      }
      .imgg{
        position: absolute;
        width: 60px;
        margin: -15px 0 0 0;
      }
      .place{
        position: absolute;
      }
      .clip{
        position: fixed;
        clip: rect(0, 0, 0, 0);
      }
      .absolutecss{
        text-align: center;
        width: 300px;
        height: 300px;
        background-color: gray;
      }
      .absolutecss > img{
        position: absolute;
        margin-left: -20px;
      }
      .absolutecss::before{
        content: '';
      }
    </style>
</head>

<body>

    <h3><span id="ha">标题</span></h3>
<!--    <div class="lbox">
      <span>
        文字测试
      </span>
    </div>
    <div style="background-color:#4abf8a;">
        <textarea></textarea>
        <input type="text">
        <a href="">aaa</a>
        <select>d</select>
        <radio>d</radio>
    </div>
    <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
    <div class="turn"></div>
    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <button id="btn"></button>
    <label for="btn">按钮</label>
    <a href="">yigebiaoq</a><a href="">再一个</a>
    <div class="icon-dot"></div>
    <div class="icon-menu"></div>
    <div class="container">
        <div class="leftmar">
            <p>
                <h1>left</h1>
                <p>bala</p>
            </p>
        </div>

        <div class="rightmar">
            <p>
                <h1>right</h1>
                <p>bppppla</p>
            </p>
        </div>
    </div>
    <div class="mar">
        <img src="./range.png" alt="">
        <p>
          而无需将用户名和密码提供给第三方应用。
          而不需要分享他们的访问许可或他们数据的所有内容。
        </p>
    </div>
    <div class="boxx">
        <div class="dotted">
            liul
        </div>
    </div>
    <div class="add">
    </div>
<div class="triangl
</div>
<div class="test-font">
  <span>sphinx</span>
</div>
    <div class="fonttest">
      <div class="t1">
        <span>aaa</span>
        <br>
        <span>mmm</span>
      </div>
      <div class="t2">
        <span>jkl</span>
        <br>
        <span>jkl</span>
      </div>
      <div class="t3">
        <span>jkl</span>
        <br>
        <span>jkl</span>
      </div>
    </div>
  <div class="imgheight">
    <img src="./range.png" height="50px">
  </div>
<div class="box-content">
  <div class="content">绿的飞机死了asd卡附件间阿法艰苦拉萨卡附件间阿法艰苦拉萨卡附件间阿法艰苦拉萨的风景</div>
</div>
    <div class="box-content">
      <span class="content">绿的飞机死了asd卡附件间阿法艰苦拉萨卡附件间阿法艰苦拉萨卡附件间阿法艰苦拉萨的风景</span>
    </div>
    <div class="lbox">
      x<span>
        x文字测试
      </span>
    </div>
    <div class="lbox">
      <span>
        文字测试
      </span>
    </div>
    <div class="lbox">
      文字测试
    </div>
  <div class="box-img">
    <img src="./range.png" >
  </div>-->
    <span class="dib-baseline"></span>

  <span class="dib-baseline">xbaseline</span>
    <div  class="icon-d">
      <p><i class="icon-delete icon"></i>xx删除</p>
    </div>
  <div class="fat">
    <div class="float">
      <img src="pic.png" width="120px" alt="">
      <p class="animal">kalsdjfkl角度考虑飞机喀什的拉dfasdf打发士大夫撒地方法基</p>
    </div>
  </div>
  <div class="bobox">
    <a href="">上一周</a>
    <a href="">下一周</a>

    <h3>sajkdlfj</h3>
  </div>
  <div>
    <div class="containerid">
      <div class="box">s</div>
      <a id="1">zzzzz</a>
    </div>
    <a href="#1">mmmmm</a>
  </div>
.0
<div >
  文字test 占位
  <img class="imgg" src="pic.png" alt="">
</div>

<div>
  <label for="text" class="place">zhan天赋</label>
  <input type="text" id="text">
</div>

  <img src="pic.png" class="clip">
<div class="allscreen">

</div>

<div class="absolutecss">
  <img src="./z.png" alt="">
</div>

</body>

</html>